<template>
    <div class="group-lst">
        <ZwSearchForm row-num="4" :option="searchOption" @search="search" @reset="reset" />
        <div class="container-table">
            <ZwTable
                ref="tableRef"
                class="table-box"
                tab-h="initial"
                :fetch-api="fetchApi()"
                :close-loading="true"
                :option="tableOption"
                :fetch-params="state.searchParams">
            </ZwTable>
        </div>
        <!--打卡用户明细-->
        <clockDetail ref="clockDetailRef"></clockDetail>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed, onActivated, onMounted, onUnmounted, nextTick, defineAsyncComponent } from 'vue';
import ZwSearchForm from '@/components/zw/search-form1.0/SearchForm';
import ZwTable from '@/components/zw/table1.0/Table';
import clockDetail from './clockDetail.vue';
import { joinList } from '@/api/smartMarketing/community/communityCheckIn';
import { deepCopy } from '@/utils/helper';
import { QuestionFilled } from '@element-plus/icons-vue';
import { renderGroupName } from './longName.tsx';
import { useRoute } from 'vue-router';

const route = useRoute();
const tableRef: any = ref<HTMLElement | null>(null);
const clockDetailRef: any = ref<HTMLElement | null>(null);
const defaultParams = {
    activity_id: route.query.activity_id, //活动ID
    groupchat_name: '' //群名称
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const searchOption = computed(() => {
    return [
        {
            label: '群聊名称',
            name: 'groupchat_name',
            value: '',
            type: 'input',
            placeholder: '请输入群聊名称'
        }
    ];
});
const search = (v: any) => {
    if (v.groupchat_name) {
        v.groupchat_name = v.groupchat_name.trim();
    }
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
};
// 表格
const tableOption = [
    {
        prop: 'serial_num',
        label: '序号',
        width: 100
    },
    {
        prop: 'name',
        label: '群聊信息',
        width: 350,
        render: renderGroupName
    },
    {
        prop: 'group_user_qty',
        label: '当前群用户数',
        minWidth: 200,
        renderHeader: () => {
            return (
                <div class="box-item-div">
                    <span>当前群用户数</span>
                    <el-tooltip placement="top" effect="dark" content="截止当前，群内的所有群用户数量（不包含员工）">
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },

    {
        prop: 'punch_card_user_qty',
        label: '打卡用户数',
        minWidth: 200,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 300px;">
                    至少参与过一次打卡的群成员总数（不包含员工），当群成员退群时不影响此值的变动；若客户在多个群内（A/B群），在A群参与过打卡，则A群为1，B群为0
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>打卡用户数</span>
                    <el-tooltip placement="top" effect="dark" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'group_friend_qty',
        label: '企微好友数',
        minWidth: 200,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">截止当前，打卡的用户中添加了任一员工企微好友的用户数</div>
            );
            return (
                <div class="box-item-div">
                    <span>企微好友数</span>
                    <el-tooltip placement="top" effect="dark" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'operate',
        label: '操作',
        width: 210,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: '查看打卡用户',
                authCode: '',
                click: (row: any) => viewCheckUser(row)
            }
        ]
    }
];
const fetchApi = () => {
    return joinList;
};
/**
 * 选中打卡用户按钮
 * @param val 选中列的信息
 */
const viewCheckUser = (val: any) => {
    clockDetailRef.value.openClockDetail(val);
};
</script>
<style lang="scss" scoped>
.group-lst {
    padding: 24px;
    height: calc(100vh - 406px);
    display: flex;
    flex-direction: column;

    .container-table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        flex: 1;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    :deep(.box-item-div) {
        display: flex;
        line-height: 1;
    }

    :deep(.box-icon) {
        margin-left: 4px;
        color: #969696;
        background: #fff;
        border-radius: 50%;
    }

    :deep(.zw-search-form1) {
        padding: 0;
        padding-bottom: 16px;
    }
}
</style>
